<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <form action="" method="post" role="form">
        <legend>用户注册</legend>

        <div class="form-group">
            <label>用户名：</label>
            <input type="text" class="form-control" name="username" onblur="checkName(this)">
        </div>
        <div class="form-group">
            <label>密码：</label>
            <input type="password" class="form-control" name="password" placeholder="密码长度为6-10">
        </div>
        <div class="form-group">
            <label>确认密码：</label>
            <input type="password" class="form-control" name="re_password">
        </div>
        <div class="form-group">
            <div class="radio">
                <label>
                    <input type="radio" name="sex" value="0" checked="checked">
                    男
                </label>
                <label>
                    <input type="radio" name="sex" value="1">
                    女
                </label>
            </div>
        </div>
        <div class="form-group">
            <label>邮箱：</label>
            <input type="text" class="form-control" name="email">
        </div>
        <div class="form-group">
            <label>qq：</label>
            <input type="text" class="form-control" name="qq">
        </div>
        <div class="form-group">
            <label>电话：</label>
            <input type="text" class="form-control" name="tel">
        </div>
        <div class="form-group">
            <label>学历：</label>
            <select name="edu" class="form-control">
                <option value="0"> -- 小学 --</option>
                <option value="1"> -- 初中 --</option>
                <option value="2"> -- 高中 --</option>
                <option value="3"> -- 大学 --</option>
            </select>
        </div>
        <div class="form-group">
            <label>爱好：</label>
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="0" name="hobbies[]">游戏
                </label>
                <label>
                    <input type="checkbox" value="1" name="hobbies[]">体育
                </label>
                <label>
                    <input type="checkbox" value="2" name="hobbies[]">画画
                </label>
            </div>
        </div>
        <div class="form-group">
            <label>简介：</label>
            <textarea name="introduce" cols="30" rows="10" class="form-control"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>
</body>
<script>
    function checkName(obj) {
        if (obj.value.trim('') == '') {
            alert('用户名不能为空');
        }
        var xhr = new XMLHttpRequest();
        xhr.open('get', '__CONTROLLER__/checkName/name/' + obj.value);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (xhr.responseText !== false) {
                    obj.value = '';
                    obj.placeholder = '用户名已存在';
                }
            }
        }
    }
</script>
</html>